<script lang="ts" setup>
import { getCurrentInstance, watch } from "vue";
import  store1 from "../../store/index"
let store:any = store1()


let { proxy }: any = getCurrentInstance()

watch(() => store.disease_tag, (newvalue, oldvalue) => {
    console.log("person数据变化了", newvalue, oldvalue);
    get_doctor()
}, { deep: false })

async function get_doctor() {
    let doctor_tag = store.disease_tag
    let res = await proxy.$axios('/get_doctor', { params: { doctor_tag } })
    console.log(res.data)
    store.doctor_res=res.data
}

</script>
<template>
    <div class="main">
        <div class="title">
            {{store.disease_tag}}相关医生推荐
        </div>
        <a class="doctor_card" target="_blank" v-for="el in store.doctor_res" >
            <div class="photo"><img :src=el.profile alt="" style="width:40px;height:40px" /></div>
            <div class="info">
                <h3>{{el.name}}</h3>
                <p class="section-name">
                    <span>{{el.job}}</span>
                    <span>&nbsp;</span>
                    <span>{{el.class}}</span>
                </p>
                <p class="hospital-name">{{el.hospital}}</p>
                <div class="hospital-doctor-card-bottom">
                    <span class="doctor-reward">￥ {{el.price}}</span>
                    <span class="doctor-star">{{el.star}}分</span>
                    <span class="doctor-reply">{{el.reply}}月回答</span>
                </div>
            </div>
        </a>


    </div>
</template>
<style scoped lang="scss">

    .doctor_card:first-child {
        width: 49px !important;
        // background-color: red !important;
    }
.main {
    background-color: #fff;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;


    .title {
        font-size: 16px;
        color: #444c57;
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
        margin: 28px 0 0 20px;
        align-self: flex-start;
        display: -webkit-box;
        word-break: break-all;
        overflow: hidden;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        white-space: normal !important;
        background-color: white
    }

    .doctor_card {
        padding: 28px 0;
        border-radius: 0;
        width: 190px;
        position: relative;
        border: none;
        border-bottom: 1px solid #e8e9eb;
        box-sizing: border-box;
        display: inline-flex;
        background-color: white;

        .photo {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            box-sizing: border-box;
            overflow: hidden;
            background-color: orange;
        }

        .info {
            margin-left: 8px;
            background-color: white;

            h3 {
                font-size: 12px;
                font-weight: 400;
                line-height: 16px;
                color: #252a33;
                padding-bottom: 0;
                background-color: white;
            }

            .section-name {
                margin-top: 4px;
                background-color: white;

                span {
                    background-color: white;
                    font-size: 12px;
                    line-height: 16px
                }
            }

            .hospital-name {
                background-color: white;
                font-size: 12px;
                margin-top: 4px;
                display: -webkit-box;
                word-break: break-all;
                overflow: hidden;
                -webkit-line-clamp: 1;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                white-space: normal !important;
            }

            .hospital-doctor-card-bottom {
                margin-top: 12px;
                background-color: white;

                .doctor-reward {
                    background-color: white;
                    font-weight: 500;
                    color: #00c792;
                    margin-right: 4px;
                    font-size: 12px;
                    line-height: 16px;
                }

                .doctor-star {
                    background-color: white;
                    margin-right: 4px;
                    font-size: 12px;
                    line-height: 16px;
                }

                .doctor-reply {
                    background-color: white;
                    font-size: 12px;
                    line-height: 16px;
                }

            }
        }
    }
}
</style>